<template>
  <div class="wrap">
    <myHead title="玩乐"></myHead>
    <!--    轮播图  -->
    <div class="index_lunbo">
      <div class="swiper-container" style="width: 100%;height:2.5rem;">
        <div class="swiper-wrapper" style="width: 100%;height:100%">
          <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="el.url">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="info">
      <div class="info_tit"><p>马来西亚英女皇钟楼</p>
        <div class="info_money"><span>￥</span>1999-4999</div>
      </div>
      <div class="info_pf">
        <p>近30天购买量：1568</p>
        <div class="star">
          景点评分:&nbsp;&nbsp;
          <van-rate allow-half v-model="9.5/2" readonly color="#F8C44B"/>
          <p>{{9.5}}分</p>
        </div>
      </div>
      <div class="info_bq"><p>首次立减</p><p>点评返现</p></div>
      <div class="info_type">
          <p><img src="../../../static/img/playmusic111.png" alt=""><span>私人定制</span></p>
          <p><img src="../../../static/img/playmusic111.png" alt=""><span>私人定制</span></p>
          <p><img src="../../../static/img/playmusic111.png" alt=""><span>私人定制</span></p>
      </div>
    </div>
    <div class="info_yhj">
      <p>领劵</p>
      <p @click="goCoupon('playCoupon')">领取优惠券<img src="../../../static/img/youjiantou003.png" alt=""></p>
    </div>
    <div class="info_jianj">
      <p class="info_tit">景点简介</p>
      <p class="info_msg">马来西亚英女皇钟楼是马来西亚地标性建筑，15世纪初，英女皇钟楼诞生于马来西亚。马来西亚英女皇钟楼是马来西亚地标性建筑，15世纪初，英女皇钟楼诞生于马来西亚。马来西亚英女皇钟楼是马来西亚地标性建筑，15世纪初，英女皇钟楼诞生于马来西亚。</p>
      <p class="info_tit">购票须知</p>
      <p class="info_msg">【使用时间】8:30--17:30（周一到周五）<br>【门票项目】大小门票；钟楼；游乐设施<br>【儿童票】2-12岁儿童半价入园</p>
    </div>
    <div class="info_list">
      <div class="info_list_tit">
        <p v-for="(x,y) in infoList" :class="listShow==y?'listShow':''" @click="isShow(y)">{{x}}</p>
      </div>
      <div class="info_list_show" v-show="listShow==0">
        <img src="../../../static/img/bannerwanle.png" alt="">
        <p class="info_msg">马来西亚英女皇钟楼是马来西亚地标性建筑，15世纪初，英女皇钟楼诞生于马来西亚。马来西亚英女皇钟楼是马来西亚地标性建筑，15世纪初，英女皇钟楼诞生于马来西亚。马来西亚英女皇钟楼是马来西亚地标性建筑，15世纪初，英女皇钟楼诞生于马来西亚。</p>
      </div>
      <div class="info_list_show1" v-show="listShow==1">
        <p>坐609直达</p>
        <p>坐610直达</p>
        <p>坐611直达</p>
      </div>
      <div class="info_list_show1" v-show="listShow==2">
        <p>两人110</p>
        <p>三人220</p>
        <p>四人330</p>
      </div>
      <div class="info_list_show1" v-show="listShow==3">
        <p>记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！记得带钱啊！</p>
      </div>
    </div>
    <div class="btn" @click="goCoupon('ConfirmPlayOrder')">购票</div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Swiper from 'swiper';
  import 'swiper/css/swiper.css';
  import Vue from 'vue';
  import {Rate} from 'vant';

  Vue.use(Rate);
  export default {
    name: "PlayMusicDetails",
    components: {
      myHead
    },
    data() {
      return {
        lunbolist: [{text: '', url: '../../static/img/bannerwanle.png'}, {
          text: '',
          url: '../../static/img/bannerwanle.png'
        }, {
          text: '',
          url: '../../static/img/bannerwanle.png'
        }], // 轮播图
        infoList:['图文介绍','行程路线','费用说明','购买须知'],
        listShow:0
      }
    },
    mounted() {
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        autoplay: true
      });
    },
    methods: {
      isShow(index){
        this.listShow = index;
      },
      goCoupon(page){
        this.$router.push({
          name:page
        })
      }
    }
  }
</script>

<style scoped>
  .wrap {
    background-color: #F0F0F0;
    min-height: 6.17rem;
    padding-top: .5rem;
  }

  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }

  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }

  /* 轮播图小圆点颜色改变 */
  >>> .swiper-pagination-bullet-active {
    background-color: #E76502 !important;
  }

  >>> .swiper-pagination-bullet {
    background-color: #FFFFFF;
  }

  .info {
    padding: .05rem .1rem;
    background-color: #FFFFFF;
  }

  .info_tit {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }

  .info_tit > p {
    font-size: .16rem;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: .20rem;
    color: #202020;
  }

  .info_money {
    font-size: .22rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #F0403A;
  }

  .info_money > span {
    font-size: .14rem;
  }

  .info_pf {
    height: .3rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .info_pf > p:nth-child(1) {
    font-size: .12rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #494949;
  }

  >>> .van-rate__icon {
    font-size: .14rem;
  }
  .star {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .star>p {
    margin-left: .1rem;
  }

  .info_bq {
    display: flex;
    flex-flow: row;
    align-items: center;
    height: .3rem;
  }
  .info_bq>p {
    width:.53rem;
    height:.17rem;
    border:.01rem solid rgba(242,112,17,1);
    border-radius:.09rem;
    font-size:.1rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #F27011;
    text-align: center;
    margin-right: .2rem;
  }

  .info_type {
    height: .4rem;
    box-sizing: border-box;
    border-top: .01rem solid #F0F0F0;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-top: .1rem;
  }
  .info_type>p {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-right: .2rem;
  }
  .info_type>p>img {
    width: .14rem;
    height: .14rem;
    margin-right: .05rem;
  }
  .info_type>p>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }

  .info_yhj {
    height: .5rem;
    padding: 0 .1rem;
    background-color: #FFFFFF;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin: .1rem 0;
  }
  .info_yhj>p:nth-child(1) {
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .info_yhj>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #F0403A;
    display: flex;
    flex-flow: row;
    align-items: center;
    line-height: .15rem;
  }
  .info_yhj>p:nth-child(2)>img {
    width: .07rem;
    height: .11rem;
    margin-left: .1rem;
  }

  .info_jianj {
    background-color: #FFFFFF;
    padding: 0 .1rem;
  }
  .info_tit {
    height: .5rem;
    line-height: .4rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #202020;
  }
  .info_msg {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(56,56,56,1);
    line-height:.24rem;
  }
  .info_list {
    background-color: #FFFFFF;
  }
  .info_list_tit {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 .15rem;
  }
  .info_list_tit>p {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #666666;
  }
  .listShow {
    color: #333333 !important;
  }
  .info_list_show {
    text-align: center;
    padding: 0 .1rem;
  }
  .info_list_show>p {
    text-align: left;
  }
  .info_list_show>img {
    width: 3.5rem;
  }

  .info_list_show1 {
    padding: .1rem .15rem;
  }
  .info_list_show1>p {
    margin-bottom: .1rem;
  }
  .btn {
    width:.52rem;
    height:.52rem;
    background:linear-gradient(90deg,rgba(255,142,65,1),rgba(255,110,0,1));
    border-radius:50%;
    font-size:.15rem;
    font-family:Source Han Sans CN;
    font-weight:500;
    color: #FFFFFF;
    text-align: center;
    line-height: .52rem;
    position: fixed;
    right: .1rem;
    bottom: .5rem;
  }
</style>
